window.onload = function () {  
    const slides = document.querySelectorAll('.picFocus-top img');  
    const thumbnails = document.querySelectorAll('.picFocus-bottom-box');  
    const picFocusBottom = document.querySelector('.picFocus-bottom');  
    const picBoxes = picFocusBottom.querySelectorAll('.picFocus-bottom-box');  
    const arrowl = document.querySelector('.arrow-l');  
    const arrowr = document.querySelector('.arrow-r');  
    const currentSlideDisplay = document.querySelector('.current-slide'); // 获取显示当前图片索引的元素 
    const phonenumber = document.querySelector('.des-top-infos a');
    const tenement = document.querySelector('.tenement');
    const tenementdiv = tenement.querySelectorAll('.tenement_div');


    let currentSlide = 0;  
    /*电话省略替代为*号 */
    function replaceMiddleWithAsterisk(text, maxLength = 11) {  
        if (text.length < maxLength) {  
          return text; // 字符串长度未超过maxLength，无需替换  
        }  
        const start = text[0]+text[1]+text[2]; // 字符串的首字符  
        const end = text[text.length - 1]; // 字符串的尾字符  
        const middleLength = maxLength - 2; // 中间需要替换为*的长度  
        const middle = '*'.repeat(middleLength); // 生成等长的*字符串  
        
        return start + middle + end; // 拼接首字符、*字符串和尾字符  
      }  
    phonenumber.textContent = replaceMiddleWithAsterisk( phonenumber.textContent,11);
    /*设置物业配置信息*/
    tenementdiv.forEach(box=>{
        console.log(box)
        const atext = box.querySelector('a');
        const img = box.querySelector('img');
        const ivalue =  box.querySelector('img').getAttribute("value");

        if(ivalue == 'true'){
           img.style.opacity = 1;
           atext.style.textDecoration = 'none';
        }
        else{
            img.style.opacity = 0.5;  //半透明
            atext.style.textDecoration = 'line-through';
        }
    })
    // 初始化图片透明度  
    picBoxes.forEach((box, index) => {  
        const image = box.querySelector('img');  
        if (index === 0) {  
            image.style.opacity = 1;  //不透明
        } else {  
            image.style.opacity = 0.5;  //半透明
        }  
    });  
   

    // 切换图片函数  
    function changeSlide(newIndex) {  
        slides[currentSlide].classList.remove('active');  
        thumbnails[currentSlide].classList.remove('active-thumbnail');  
        currentSlide = newIndex;  
        slides[currentSlide].classList.add('active');  
        thumbnails[currentSlide].classList.add('active-thumbnail');  
        
        // 更新图片透明度和当前图片索引显示  
        updateSlideDisplay();  
    }  
     // 更新图片透明度和当前图片索引显示的函数  
     function updateSlideDisplay() {  
        // 更新图片透明度（如果需要的话）  
        picBoxes.forEach((box, index) => {  
            const image = box.querySelector('img');  
            if (index === currentSlide) {  
                image.style.opacity = 1;  
            } else {  
                image.style.opacity = 0.5;  
            }  
        });  
  
        // 更新当前图片索引显示  
        currentSlideDisplay.textContent = `${currentSlide + 1}/${slides.length}`;  
    }  

    // 初始状态下第一张图片和对应的缩略图设置为激活状态
    slides[0].classList.add('active');
    thumbnails[0].classList.add('active-thumbnail');
    
    // 点击缩略图切换图片  
    thumbnails.forEach((thumbnail, index) => {  
        thumbnail.addEventListener('click', () => {  
            changeSlide(index);  
        });  
    });  
  
    // 左右箭头切换图片  
    arrowl.addEventListener('click', () => {  
        changeSlide((currentSlide - 1 + slides.length) % slides.length);  
    });  
  
    arrowr.addEventListener('click', () => {  
        changeSlide((currentSlide + 1) % slides.length);  
    });  
    var map = new AMap.Map('des-middle-map', {
        resizeEnable: true,
        center: [116.397428, 39.90923],
        zoom: 18
    });

    var marker = new AMap.Marker({
        position: map.getCenter(),
        icon: 'images/position.png',
        anchor:'bottom-center',
        offset: new AMap.Pixel(0, 0)
    });

    marker.setMap(map);

    // 设置鼠标划过点标记显示的文字提示
    marker.setTitle('我是marker的title');

    // 设置label标签
    // label默认蓝框白底左上角显示，样式className为：amap-marker-label
    marker.setLabel({
        direction:'top',
        offset: new AMap.Pixel(10, 0),  //设置文本标注偏移量
        content: "<div class='des-middle-map-info'>我是 marker 的 label 标签</div>", //设置文本标注内容
    });
     
};